<template>
    <div class="allocMenu">
        <el-tree :data="data" show-checkbox node-key="id" :default-checked-keys="[5]" :default-expanded-keys="[2, 3]"
            :default-expand-all="true" :props="defaultProps" />
        <el-button>取消</el-button>
        <el-button>确认</el-button>
    </div>
</template>

<script setup lang="ts">
import useTable from '../../hooks/useTables'
import { menustreelist } from '../../request/QmsAdminConreiller';
import * as api from '../../request/api'
import { ref, watchEffect } from 'vue'
import type { Ref } from 'vue'
import { useRoute } from 'vue-router'

let route = useRoute()
console.log(route);

const data: Ref<any[]> = ref([])

let id = Number(route.fullPath.split("=")[1]);

const defaultProps = {
    children: "children",
    label: "label",
};

watchEffect(async () => {
    const res = await api.admin.distrrole(id)
    let data1 = res.filter((item) => {
        return item.parentId == 0
    })
    console.log(data1);

    function filterFn(val: number) {
        let data2 = res.filter((el) => {
            return el.parentId == val;
        });

        let array = data2.map((el) => {
            // console.log(el.title);
            return {
                id: el.id,
                label: el.title,
            };
        });
        // console.log(array);

        return array;
    }

    let newData = data1.map((el) => {
        console.log(el.title);
        return {
            id: el.id,
            label: el.title,
            children: filterFn(el.id),
        };
    });
    data.value = newData;
});

// const distribution = async () => {
//     let res: any = api.admin.distrrole(route.id)
//     if (data.vaue == res) {
//         array.value = data.value.id
//     }
//     console.log(res);

// }
// distribution()
// const defaultProps = {
//     children: 'children',
//     label: 'title',
// }

</script>

<style lang="scss" scoped>
.allocMenu {
    width: 90%;
    padding: 30px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
}
</style>